<template>
  <div class="action">
    <span>经度：
      <InputNumber :precision="6" :controls="false" :min="limits.longitude.min" :max="limits.longitude.max"
        v-model:value="input.longitude" />
    </span>
    <span>纬度：
      <InputNumber :precision="6" :controls="false" :min="limits.latitude.min" :max="limits.latitude.max"
        v-model:value="input.latitude" />
    </span>
    <Button @click="addDataGeo()" type="primary">添加</Button>
  </div>
  <MapVue :data-geo="dataGeo" @map-click="addDataGeo" @mark-click="openModal"></MapVue>
  <Modal v-model:visible="modal.visible" title="查看信息" :footer="null">
    <div>经度：{{ modal.data?.value?.[0] ?? '暂无' }}</div>
    <div>纬度：{{ modal.data?.value?.[1] ?? '暂无' }}</div>
  </Modal>
</template>

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import { InputNumber, Button, Modal } from 'ant-design-vue'
import { reactive } from 'vue';
import MapVue from './components/map.vue'
// 经纬度范围,目前设置为中国经纬度范围
const limits = {
  longitude: {//经度
    max: 135.833333,
    min: 73.55
  },
  latitude: {//纬度
    max: 53.55,
    min: 3.85
  }
}
const input = reactive({
  longitude: limits.longitude.min,//经度
  latitude: limits.latitude.min,//纬度
})
/**
 * @description 地图标记对象数组
 * @example [{value:[number,number]}]
 */
const dataGeo = reactive([])
/**
 * @description 添加标记
 * @param {[number,number]} newData 经纬度数组
 */
const addDataGeo = (newData) => {
  // 把经纬度数组当参数时，直接push
  if (newData) {
    dataGeo.push(newData)
  } else {
    // 没有参数，表示使用输入框的数据作为经纬度，调整格式后push
    dataGeo.push({ name: '', value: [input.longitude, input.latitude] })
  }
}

// 弹窗
const modal = reactive({
  visible: false,
  data: {}
})
const openModal = data => {
  modal.visible = true
  modal.data = data
}

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
}
</style>
<style scoped lang="scss">
.action {
  margin-top: 60px;
  width: 40%;
  display: flex;
  justify-content: space-around;

  span {
    display: flex;
    flex: 1;
    align-items: center;

    :deep(.ant-input-number) {
      flex: 1;
      margin-right: 2em;
    }
  }
}
</style>
